

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


function logProps(WrappedComponent) {
    return class extends React.Component {
      componentDidMount() {
        console.log('Current props: ', this.props);
      }
      render() {
        // 用容器包裹输入组件，不要修改它，漂亮！
        return <WrappedComponent {...this.props} />;
      }
    }
  }
  
  
class FancyButton extends React.Component {
    render() {
        // 用容器包裹输入组件，不要修改它，漂亮！
        return <></>;
      }
}
  





const HighOrderComponent = (WrapComponent, title) =>{
    class HighOrderComponent extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                username: ''
            }
        }
 
        componentWillMount() {
            let username = this.props.username;
            this.setState({
                username: username
            });
        }
       
        render() {
            const {forwardedRef, ...rest} = this.props;
            return(
                <div>
                    <legend>{title}</legend>
                    {/* <WrapComponent username={this.state.username}></WrapComponent> */}
                    <WrapComponent ref={forwardedRef} username={this.state.username} {...rest}/>
                </div>
            )
        }
    }

    function forwardRef(props, ref) {
        return <HighOrderComponent {...props} forwardedRef={ref} />;
      }
    
      // These next lines are not necessary,
      // But they do give the component a better display name in DevTools,
      // e.g. "ForwardRef(logProps(MyComponent))"
      const name = Component.displayName || Component.name;
      forwardRef.displayName = `HighOrderComponent(${name})`;
    
      return React.forwardRef(forwardRef);
}





class SecHoc extends React.Component{
    aa() { 
        console.log("12121")
    }
    render(){
        return (
            <div>
                <h2>Hi </h2>
                <h2>晓不晓得哪里好耍{this.props.username}</h2>
            </div>
        );
    }
}




const HighOrderSecond = HighOrderComponent(SecHoc, 'Second Page');
const foo = logProps(FancyButton);

  
  // Rather than exporting FancyButton, we export LogProps.
  // It will render a FancyButton though.
// export default logProps(FancyButton);
export  { HighOrderSecond, foo }   ;